<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn {
            width: 40px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: cornsilk;
        }

        div:nth-child(2) {
            background-color: darkgray;
        }
    </style>
</head>

<body>
    <div id="btn">点我</div>
    <div>现在几点钟</div>

    <div></div>
    <p>
        赵玉真
        <span>胡歌</span>

    </p>
</body>
<script>

    // 大量使用innerHTML
    var btn = document.getElementById('btn')
    var div = document.querySelectorAll('div')
    var p = document.querySelector('p')


    //innerText
    btn.onclick = () => {
        div[1].innerText = new Date();
    }
    //    innerText和innerHTML区别
    //   innerText 不识别html标签 去除换行和空格

    // div[2].innerText = ' <strong>今天是：</strong>1-1-1' //结果是<strong>今天是</strong>：1-1-1

    // innerHTML 识别html标签 保留空格换行
    div[2].innerHTML = '<strong>今天是</strong>：1-1-1'//加粗了今天是：1-1-1
    console.log(p.innerText);
    console.log(p.innerHTML);

</script>

</html>